<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="UTF-8">
	<title>红酒会 - 智能红酒管家</title>
	<link type="text/css" rel="stylesheet" href="${ctx}/static/styles/style.css">
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/scripts/winwine.js"></script>
	<style type="text/css">
		html,body,.scene { width: 100%; height: 100%; overflow: hidden;}
		table {border-collapse: collapse;}
		th, td {padding: 0;} 
	</style>
</head>

<body>
	<ul id="scene" class="scene">
		<li class="layer registrationBg" data-depth="0.20">
        	<div class="regBg"></div>
        </li>
        <li class="layer" data-depth="0">
        	<div class="regBox">
            	<div class="regHead">您提供的所有信息，绝不会对外公开或者用作其他用途，请放心填写</div>
                <div class="regCont">
                    <div class="regContL">
<form id="form" action="${ctx}/register" method="post">
	<ul class="regTB">
		<li>
			<div class="regtr01"><i>用户名：</i></div>
	       	<div class="regtr02"><input type="text" id="username" name="username" class="regTex"
	       		autocomplete="off" /></div>
	       	<div class="regtr03"><span id="error_username" class="red"></div>
	 	</li>
	   	<li>
	       	<div class="regtr01"><i>密码：</i></div>
	       	<div class="regtr02"><input type="password" id="password" name="password" autocomplete="off"
	       		class="regTex" onkeydown="if(event.keyCode==32) return false;" /></div>
	       	<div class="regtr03"><span id="error_password" class="red"></div>
		</li>
	 	<li>
			<div class="regtr01"><i>确认密码：</i></div>
	       	<div class="regtr02"><input type="password" id="repass" name="repass" class="regTex" /></div>
	       	<div class="regtr03"><span id="error_repass" class="red"></div>
		</li>
		<li>
	       	<div class="regtr01"><i>邮箱：</i></div>
	       	<div class="regtr02"><input type="text" id="email" name="email" class="regTex" /></div>
	       	<div class="regtr03"><span id="error_email" class="red"></div>
	 	</li>
		<li>
	       	<div class="regtr01"><i>请输入验证码：</i></div>
	       	<div class="regtr02">
	           	<input type="text" id="verify" name="verify" class="regTex Texyzm" />
	           	<img id="verifyCode" class="regyzm" style="height:28px; width:80px;"/></a>
	            <span class="spanyzm">
	            	<a href="javascript:;" onclick="refreshVerifyCode()">看不清？</a>
	            </span>
	     	</div>
	     	<div class="regtr03"><span id="error_verify" class="red"></span></div>
	 	</li>
	  	<li>
	       	<div class="regtr01"></div>
	       	<div class="regtr02"><button type="submit" class="regBtn"></button></div>
	       	<div class="regtr03"></div>
		</li>
	</ul>

	<!-- <table>
	    <tr>
	        <td class="regTBtit" width="158" height="50"><i>用户名：</i></td>
	        <td width="268" height="50">
	        	<input type="text" id="username" name="username" class="regTex"></td>
	        <td width="270" height="50"><span id="error_username" class="red"></span></td>
	    </tr>
	    <tr>
	        <td class="regTBtit" width="158" height="50"><i>密码：</i></td>
	        <td width="268" height="50">
	        	<input type="password" id="password" name="password" class="regTex"
	        		onkeydown="if(event.keyCode==32) return false;"></td>
	        <td width="270" height="50"><span id="error_password" class="red"></span></td>
	    </tr>
	    <tr>
	        <td class="regTBtit" width="158" height="50"><i>确认密码：</i></td>
	        <td width="268" height="50">
	        	<input type="password" id="repass" name="repass" class="regTex"></td>
	        <td width="270" height="50"><span id="error_repass" class="red"></span></td>
	    </tr>
	    <tr>
	        <td class="regTBtit" width="158" height="50"><i>邮箱：</i></td>
	        <td width="268" height="50">
	        	<input type="text" id="email" name="email" class="regTex"></td>
	        <td width="270" height="50"><span id="error_email" class="red"></span></td>
	    </tr>
	    <tr>
	        <td class="regTBtit" width="158" height="50"><i>验证码：</i></td>
	        <td width="268" height="50">
	        	<input type="text" id="verify" name="verify" class="regTex Texyzm" />
	        	<a href="javascript:;" onclick="refreshVerifyCode()">
	            	<img id="verifyCode" class="regyzm" style="height:28px; width:80px;"/></a>
	            <span class="spanyzm">
	            	<a href="javascript:;" onclick="refreshVerifyCode()">看不清？</a>
	            </span>
	        </td>
			<td width="270" height="50"><span id="error_verify" class="red"></span></td>
	    </tr>
	    <tr>
	        <td width="158" height="75"></td>
	        <td width="268" height="75">
	        	<button type="submit" class="regBtn"></button>
	        </td>
	        <td width="270" height="75"></td>
	    </tr>
</table> -->
</form>

                    </div>
                    <div class="regContR">
                    	<div class="regR01">
                    		<div class="R01L">已经有注册帐号？</div>
                    		<a href="${ctx}/login" class="R01R"><img src="${ctx}/static/images/R01R.png" alt=""></a>
                    	</div>
                        <div class="regR02">
                            <p>使用合作网站账号登陆</p>
                            <a href="javascript:;" target="_blank" class="WbDl"><img src="${ctx}/static/images/sinaWb.png" alt=""></a>
                            <a href="javascript:;" target="_blank" class="WbDl"><img src="${ctx}/static/images/txWb.png" alt=""></a>
                    	</div>
                    </div>
                </div>
            </div>
        </li>
	</ul>

	<script type="text/javascript" src="${ctx}/static/scripts/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(function() {
			refreshVerifyCode();
			$('#form').validate({
				rules: {
					username: {
						required: true,
						rangelength: [4,16],
						remote: {
							url: '${ctx}/validate/username',
							type: 'post',
							data: {
								str: function() {
									return $('#username').val();
								}
							}
						}
					},
					password: {
						required: true,
						rangelength: [6,20]
					},
					repass: {
						required: true,
						equalTo: '#password'
					},
					email: {
						required: true,
					    email: true,
					    maxlength: 50,
					    remote: {
							url: '${ctx}/validate/email',
							type: 'post',
							data: {
								str: function() {
									return $('#email').val();
								}
							}
						}
					},
					verify : {
						required: true
					}
				},
				messages: {
					username: {
						required: '请填写用户名',
						rangelength:'用户名长度只能{0}到{1}位',
						remote: $.format('{0} 已被占用')
					},
					password: {
						required: '请填写密码',
						rangelength: '密码长度只能{0}到{1}位'
					},
					repass: {
						required: '请填写确认密码',
						equalTo: '两次密码输入不一致'
					},
					email: {
						required: '请填写邮箱',
					    email: '请填写正确的邮箱',
					    maxlength: '邮箱的长度不能超过50个字符',
					    remote: $.format('{0} 已被占用')
					},
					verify : {
						required: '请填写验证码'
					}
				},
				onkeyup: false,
				errorElement: 'em',
				errorPlacement: function(error, element) {
					error.appendTo($("#error_" + element.attr("id")));
				},
				submitHandler: function(form) {
					$.ajax({
						url:'${ctx}/validate/verify',
						data: {verify: $('#verify').val()},
						success: function(result) {
							if(result) {
								form.submit();
							}else {
								refreshVerifyCode();
								$('#error_verify').attr('class', 'red').text('验证码填写错误！');
							}
						}
					});
				}
			});
		});
	</script>
</body>
</html>